<template>
  <div>
    <div class="page-container">
      <div class="handle-box">
        <span class="inputName">赛事列表：</span>
        <el-select v-model="query.active_id" filterable placeholder="请选择" @change="initAjaxMethod">
          <el-option :value="0" label="全部"></el-option>
          <el-option :value="item.id" :label="item.title" v-for="item in activeList" :key="item.id"></el-option>
        </el-select>
        <span class="inputName">姓名/手机号码：</span>
        <el-input placeholder="请输入姓名/手机号码" v-model="query.keyword" @keyup.enter="initAjaxMethod" class="inputbox"
          style="width: auto; margin-right: 10px"></el-input>
        <span class="inputName">作品状态：</span>
        <el-select v-model="query.status" filterable placeholder="请选择" @change="initAjaxMethod">
          <el-option :value="0" label="全部"></el-option>
          <el-option :value="1" label="未提交"></el-option>
          <el-option :value="2" label="已提交"></el-option>
        </el-select>
        <span class="inputName">审核状态：</span>
        <el-select v-model="query.is_examine" filterable placeholder="请选择" @change="initAjaxMethod">
          <el-option :value="0" label="全部"></el-option>
          <el-option :value="1" label="未审核"></el-option>
          <el-option :value="2" label="已审核"></el-option>
        </el-select>
      </div>
      <div class="handle-box">
        <span class="inputName">参赛人员：</span>
        <el-select v-model="query.role_type" filterable placeholder="请选择" @change="initAjaxMethod">
          <el-option :value="0" label="全部"></el-option>
          <el-option :value="1" label="参赛人员"></el-option>
          <el-option :value="2" label="评审人员"></el-option>
        </el-select>
        <span style="padding: 8px;"></span>
        <el-button type="success" icon="el-icon-search" size="medium" @click="searchTemplate">搜索</el-button>
        <el-button type="warning" icon="el-icon-refresh" size="medium" @click="reset">重置</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="序号" width="50" align="center">
            <template scope="scope">
              <span>{{ scope.$index + (query.page - 1) * query.pageSize + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="nickname" />
          <el-table-column label="手机号码" align="center" prop="mobile" />
          <el-table-column label="报名赛事" align="center">
            <template slot-scope="scope">{{ scope.row.active_title }}</template>
          </el-table-column>
          <el-table-column label="人员类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.role_type == 1">参赛人员</span>
              <span v-if="scope.row.role_type == 2">评审人员</span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.is_examine == 0">未审核</span>
              <span v-if="scope.row.is_examine == 1">已审核</span>
            </template>
          </el-table-column>
          <el-table-column label="作品状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">未提交</span>
              <span v-if="scope.row.status == 1">已提交</span>
            </template>
          </el-table-column>
          <el-table-column label="报名时间" align="center" prop="create_time" :formatter="$GLOBAL.dateFormat" />
          <el-table-column label="参赛人实名制" align="center">
            <template slot-scope="scope">
              <el-button @click="handleSee(scope.row, 1)" v-if="scope.row.entry_id" type="text"
                size="small">点击查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="监护人实名制" align="center">
            <template slot-scope="scope">
              <el-button @click="handleSee(scope.row, 2)" v-if="scope.row.guardian_id" type="text"
                size="small">点击查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="450">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row, 1)" type="text" size="small"
                v-if="scope.row.status == 1 && scope.row.role_type == 1">查看作品</el-button>
              <el-button @click="handleClick(scope.row, 2)" type="text" size="small"
                v-if="scope.row.status == 1 && scope.row.role_type == 1">点评列表</el-button>
              <el-button @click="handleClick(scope.row, 3)" type="text" size="small"
                v-if="scope.row.status == 1 && scope.row.role_type == 1">作品评分</el-button>
              <el-button @click="handleClick(scope.row, 6)" type="text" size="small">{{ scope.row.is_examine ==
          0 ? '审核通过' : '取消审核' }}</el-button>
              <el-button @click="handleClick(scope.row, 4)" type="text" style="color:red;" size="small"
                v-if="scope.row.status == 1 && scope.row.role_type == 1">撤回提交状态</el-button>
              <el-button @click="handleClick(scope.row, 5)" type="text" style="color:red;" size="small">删除报名</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination layout="sizes,total, prev, pager, next, jumper" :current-page="query.page"
          :page-size="query.pageSize" :page-sizes="[10, 50, 100, 150, 200]" @size-change="handleSizeChange"
          :total="total" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialog" width="70%">
      <div v-if="addOrEdit == 1">
        <el-timeline v-if="scoringList.length > 0">
          <el-timeline-item :timestamp="'评委：' + item.nickname" placement="top" v-for="item in scoringList"
            :key="item.id">
            <el-card>
              <h4>得分：{{ item.scoring_num }}分</h4>
              <p v-if="item.comment">评语：{{ item.comment }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <empty v-if="scoringList.length == 0" />
      </div>
      <div v-if="addOrEdit == 2">
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="3">
              <div class="list-title">评委:</div>
            </el-col>
            <el-col :span="21">
              <el-select v-model="scoring.review_id" filterable placeholder="请选择">
                <el-option :value="item.id" :label="item.nickname" v-for="item in reviewList"
                  :key="item.id"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </div>
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="3">
              <div class="list-title">分值:</div>
            </el-col>
            <el-col :span="21">
              <el-radio-group v-model="scoring.scoring_num">
                <el-radio :label="item" v-for="item in 10" :key="item">{{ item }}分</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
        </div>
        <div class="list-group">
          <el-row :gutter="20">
            <el-col :span="3">
              <div class="list-title">评语:</div>
            </el-col>
            <el-col :span="21">
              <el-input v-model="scoring.comment" type="textarea" :rows="6" placeholder="请输入评语"></el-input>
            </el-col>
          </el-row>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="addAjaxMethod">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="personTitle" :visible.sync="personDialog" width="70%"> 
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title">身份证正面:</div>
          </el-col>
          <el-col :span="21">
            <el-image style="width: 300px; height: auto" :src="basePath+persons.id_front" fit="cover" :preview-src-list="[basePath+persons.id_front]">
            </el-image>
          </el-col>
        </el-row>
      </div>
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title">身份证方面:</div>
          </el-col>
          <el-col :span="21">
            <el-image style="width: 300px; height: auto" :src="basePath+persons.id_aspect" fit="cover" :preview-src-list="[basePath+persons.id_aspect]">
            </el-image>
          </el-col>
        </el-row>
      </div>
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title">电话号码:</div>
          </el-col>
          <el-col :span="21">
            <el-input v-model="persons.mobile" disabled placeholder="请输入评语"></el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="personDialog = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-image-viewer v-if="showPictureView" :zIndex="Number(99999)" :on-close="() => showPictureView = false"
      :url-list="viewImgList" :initialIndex="viewPicIndex" /> 
      <el-dialog title="作品列表" :visible.sync="dialogsource" width="50%" top="10%" :close-on-click-modal="false">
        <el-table :data="sourceData" style="width: 100%" border> 
          <el-table-column label="序号" width="50" align="center">
            <template scope="scope">
              <span>{{ scope.$index+ 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="资源名" align="center" prop="path_name" />
          <el-table-column label="资源类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.source_type == 1">图片</span>
              <span v-if="scope.row.source_type == 2">视频</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button @click="handleSourceSee(scope.row)" type="text" size="small">查看作品</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="视频" :visible.sync="dialogVideo" width="50%" top="10%" :before-close="originaClose">
        <video :src="originalVideo" autoplay controls style="width:100%;height:500px;" ref="originaVideo"></video>
      </el-dialog>
  </div>
</template>

<script>
import global from '@/utils/global';
import downExcel from '@/components/ExcelModel/ExcelModel.vue';
import ElImageViewer from '@/components/imageViewer/imageViewer.vue';
import {findIndex} from 'lodash';
export default {
  components: { downExcel, ElImageViewer },
  name: 'contract',
  data() {
    return {
      basePath: this.$API.ASSET_IMAGES_URL,
      baseVideoPath: this.$API.ASSET_VIDEO_URL,
      docLoadPath: this.$API.API_PATH + this.$API.LOGIN_EXCEL,
      tableData: [], //数据列表
      activeList: [], //数据列表
      reviewList: [], //数据列表
      scoringList: [], //数据列表
      query: {
        page: 1,
        keyword: '',
        pageSize: 10,
        active_id: '',
        is_examine: 0,
        role_type: 0
      },
      showPictureView: false,
      viewPicIndex: 0,
      viewImgList: [],
      disabled: false,
      modelType: 1,
      itemId: '',
      total: 0,
      multipleSelection: [],
      type_hdlx: 0,
      type: 0,
      dialogTitle: '新建开票',
      addOrEdit: 1,
      signup_id: '',
      dialog: false,
      scoring: {
        scoring_num: 1,
        comment: '',
        review_id: '',
        active_id: '',
        member_id: '',
        signup_id: ''
      },
      personTitle: '',
      personDialog: false,
      persons:{},
      sourceData:[],
      dialogsource: false,
      dialogVideo: false,
      originalVideo:'',
    };
  },
  filters: {
    formDate: (val) => {
      return global.getdate1(val);
    }
  },
  mounted() {
    this.initAjaxMethod();
    this.tempAjaxMethod();
  },
  methods: {
    handleSee(data,flag) {
      this.personTitle=flag == 1?'参赛人实名制':'监护人实名制';
      this.personDialog=true;
      this.persons={
        id_front:flag == 1?data.id_front:data.g_id_front,
        id_aspect:flag == 1?data.id_aspect:data.g_id_aspect,
        mobile:flag == 1?data.mobile:data.g_mobile,
      }
    },
    originaClose(done){
			this.$refs['originaVideo'].pause();
			done();
		},
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    searchTemplate() {
      this.query.page = 1;
      this.initAjaxMethod();
    },
    reset() {
      this.query = {
        page: 1,
        keyword: '',
        pageSize: 10,
        active_id: '',
        is_examine: 0,
        role_type: 0
      };
      this.initAjaxMethod();
    },
    //企业列表接口
    initAjaxMethod() {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(this.$API.ZHACTIVE_SIGNUP_INDEX, {
          page: this.query.page,
          active_id: this.query.active_id,
          keyWord: this.query.keyword,
          pageSize: this.query.pageSize,
          status: this.query.status,
          is_examine: this.query.is_examine,
          role_type: this.query.role_type
        })
        .then((res) => {
          console.log('报名列表', res);
          loading.close();
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            this.tableData = list;
            this.total = res.data.count ? Number(res.data.count) : 0;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    tempAjaxMethod() {
      this.$http
        .post(this.$API.ZHACTIVE_SIGNUP_ACTIVELIST)
        .then((res) => {
          if (res.code == 1) {
            this.activeList = Array.isArray(res.data) ? res.data : [];
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });

      this.$http
        .post(this.$API.ZHACTIVE_SIGNUP_REVIEWLIST)
        .then((res) => {
          if (res.code == 1) {
            this.reviewList = Array.isArray(res.data) ? res.data : [];
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //重置
    reset() {
      this.query.page = 1;
      this.query.keyword = '';
      this.initAjaxMethod();
    },
    //点击第几页
    handlePageChange(currentPage) {
      this.query.page = currentPage;
      this.initAjaxMethod();
    },
    //点击第几页
    handleSizeChange(currentPage) {
      this.query.pageSize = currentPage;
      this.initAjaxMethod();
    },
    handleSourceSee(row){
      if (row.source_type == 1) {
        let imags=this.sourceData.filter(o => o.source_type == 1);
        let index = findIndex(imags, o => o.id == row.id);
        this.viewImgList=imags.map(o => this.basePath + o.path); 
        this.viewPicIndex=index>=0?index:0;
        this.showPictureView=true;
      } else if (row.source_type == 2) {
        this.dialogVideo=true;
        this.originalVideo=this.baseVideoPath+row.path;
      }
    },
    handleClick(row, flag) {
      this.addOrEdit = flag;
      if (flag == 1) {
        const loading = this.$loading({ text: '加载中...' });
        this.$http
          .post(this.$API.ZHACTIVE_SIGNUP_WORKS, { signup_id: row.id })
          .then((res) => {
            loading.close();
            if (res.code == 1) {
              let list = Array.isArray(res.data) ? res.data : [];
              if (list.length > 0) {
                this.dialogsource=true; 
                this.sourceData=list;
              } else {
                this.$message.error('暂无作品');
              }

            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
      } else if (flag == 2) {
        const loading = this.$loading({ text: '加载中...' });
        this.$http
          .post(this.$API.ZHACTIVE_SIGNUP_SCORINGLIST, { signup_id: row.id })
          .then((res) => {
            loading.close();
            if (res.code == 1) {
              let list = Array.isArray(res.data) ? res.data : [];
              this.scoringList = list;
              this.dialogTitle = '评分列表';
              this.addOrEdit = 1;
              this.dialog = true;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            loading.close();
            this.$message.error(err.msg);
          });
      } else if (flag == 3) {
        this.scoring = {
          scoring_num: 1,
          comment: '',
          review_id: '',
          active_id: row.active_id,
          member_id: row.member_id,
          signup_id: row.id
        };
        this.dialogTitle = '打分';
        this.addOrEdit = 2;
        this.dialog = true;
      } else if (flag == 4) {
        this.$confirm('确定进行此操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post(this.$API.ZHACTIVE_SIGNUP_STATUS, { id: row.id }).then((res) => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initAjaxMethod();
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          });
        });
      } else if (flag == 5) {
        this.$confirm('此操作将永久删除报名及作品、评分, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post(this.$API.ZHACTIVE_SIGNUP_DEL, { id: row.id }).then((res) => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initAjaxMethod();
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          });
        });
      } else if (flag == 6) {
        const loading = this.$loading({ text: '加载中...' });
        this.$http
          .post(this.$API.ZHACTIVE_SIGNUP_EXAMINE, { id: row.id })
          .then((res) => {
            loading.close();
            if (res.code == 1) {
              this.$message.success('操作成功!');
              this.initAjaxMethod();
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            loading.close();
            this.$message.error(err.msg);
          });
      }
    },
    addAjaxMethod() {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(this.$API.ZHACTIVE_SIGNUP_SCORING, this.scoring)
        .then((res) => {
          loading.close();
          if (res.code == 1) {
            this.$message.success('操作成功');
            this.dialog = false;
            this.initAjaxMethod();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          loading.close();
          this.$message.error(err.msg);
        });
    }
  }
};
</script>

<style scoped>
/* .inputName {
      font-size: 14px;
      color: #606266;
      margin-right: 10px;
  } */
.handle-box {
  padding: 10px 0;
}

.inputName {
  font-size: 15px;
  padding: 0 10px;
}

.inputbox {
  width: 200px;
  margin-right: 20px;
}

.searchGroup {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.list {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 20px;
}

.list-group {
  padding: 10px;
}

.list-title {
  padding: 7px 0;
}

.el-upload--text {
  width: auto !important;
  height: auto !important;
}

.mast-icon {
  color: red;
}
</style>
